/**
 * ES5面向对象拖拽插件
 */

/**
 * 拖拽构造函数
 * @param {实例成员} id 
 */
function Drag(id){
	//console.log(id);
	//赋值
	this.oBox = document.getElementById(id);
	//鼠标在盒子中的坐标进行值的初始化，默认为0
	this.mouseX = 0;
	this.mouseY = 0;
	//需要将this赋值
	var _this = this;
	console.log(_this);
	//鼠标按下
	this.oBox.onmousedown=function(){
		console.log('按下...');
		//因为相关事件比较繁琐，所以使用对象原型定义
		//盒子初始化(移动/抬起)
		//console.log(this);//<div id="box1">
		_this.startDrag();
	}
}
/**
 * 在原型对象Drag.pototype上挂载方法
 * startDrag 方法名
 */
Drag.prototype.startDrag = function(e){
	//console.log('start...');
	e = e||window.event;
	//给构造函数的实例成员进行动态赋值
	this.mouseX = e.pageX-this.oBox.offsetLeft;
	this.mouseY = e.pageY-this.oBox.offsetTop;
	
	var _this = this;
	//两个事件拆分,一个是移动，一个是抬起
	document.onmousemove = function(){
		//console.log(this);
		_this.moveDiv();
	}
	document.onmouseup = function(){
		//console.log(this);
		_this.upDiv();
	}
}

//在原型对象Drag.pototype上挂载移动的方法
/**
 * document.documentElement 获取根节点html
 * document.documentElement.clientWidth 可视区域的宽度
 */
Drag.prototype.moveDiv =function(e){
	console.log('move...');
	e = e||window.event;
	//判断
	var oLeft = e.pageX-this.mouseX;
	var oTop = e.pageY-this.mouseY;
	//控制绝对定位的left和top
	var maxLeft = document.documentElement.clientWidth-this.oBox.offsetWidth;
	var maxTop = document.documentElement.clientHeight-this.oBox.offsetHeight;
	//比较
	if(oLeft<0){
		oLeft=0;
	}
	if(oLeft>maxLeft){
		oLeft = maxLeft;
	}
	if(oTop<0){
		oTop = 0;
	}
	if(oTop>maxTop){
		oTop = maxTop;
	}
	//赋值
	this.oBox.style.left = oLeft+'px';
	this.oBox.style.top = oTop+'px';
	
}
//在原型对象Drag.rpototype上挂载抬起的方法
Drag.prototype.upDiv = function(){
	console.log('up...');
	document.onmousemove = null;
	document.onmouseup = null;
}